<template>
    <!-- <div style=" padding-top: 2px; position: sticky; top: 50px;background-color: #f8f8fa;z-index: 999;"> -->
    <div class="search-aa" :style="{ top: isFixed ? '-1px' : '50px' }">
        <div class="container">
            <!-- 搜索模块 -->
            <!-- logo 页面 v-if="showLogo" -->
            <img :src="$store.state.logoImg"  class="logo-img" alt="" @click="sFnrout" />
            <div class="input-one">
                <i-input v-model="searchData" size="large" class="search" placeholder="输入你想查找的商品"
                    @keyup.enter.native="search">
                    <Button v-if="!store" slot="append" @click="search">搜索</Button>
                </i-input>
            </div>
        </div>
    </div>
    <!-- </div> -->
</template>

<script>
import storage from '@/plugins/storage.js'
import {
    hotWords
} from '@/api/goods.js'
export default {
    name: 'search',
    props: {
        showTag: { // 是否展示搜索栏下方热门搜索
            type: Boolean,
            default: true
        },
        showLogo: { // 是否展示左侧logo
            type: Boolean,
            default: true
        },
        store: { // 是否为店铺页面
            type: Boolean,
            default: false
        },
        hover: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            searchData: '', // 搜索内容
            isFixed: false
        };
    },
    methods: {
        selectTags(item) { // 选择热门标签
            this.searchData = item;
            this.search();
        },
        search() { // 全平台搜索商品
            /* this.$router.push({
                path: '/',
                query: {
                    keyword: this.searchData
                }
            }); */
            this.$emit('search', this.searchData)
        },
        searchStore() { // 店铺搜索商品
            this.$emit('search', this.searchData)
        },
        // 滚动
        handleScroll() {
            if (window.scrollY > 49) {
                this.isFixed = true
            }

        },
        sFnrout(){
            console.log(12);
            this.$emit('searchHfn','1')
            this.$router.push('/')
            // this.$router.push({path: '/'});
        }
    },
    computed: {
        promotionTags() {
            if (this.$store.state.hotWordsList) {
                return JSON.parse(this.$store.state.hotWordsList)
            } else {
                return []
            }
        }
    },
    created() {
        this.searchData = this.$route.query.keyword
        if (!this.hover) { // 首页顶部固定搜索栏不调用热词接口
            // 搜索热词每5分钟请求一次
            const reloadTime = storage.getItem('hotWordsReloadTime')
            const time = new Date().getTime() - 5 * 60 * 1000
            /* if (!reloadTime) {
                hotWords({
                    count: 5
                }).then(res => {
                    if (res.success && res.result) storage.setItem('hotWordsList', res.result)
                })
                storage.setItem('hotWordsReloadTime', new Date().getTime())
            } else if (reloadTime && time > reloadTime) {
                hotWords({
                    count: 5
                }).then(res => {
                    if (res.success && res.result) storage.setItem('hotWordsList', res.result)
                })
                storage.setItem('hotWordsReloadTime', new Date().getTime())
            } */
        }
    }
    , mounted() {
        window.addEventListener('scroll', this.handleScroll)
    }
};
</script>
<style scoped lang="scss">
.search-aa {
    position: sticky;
    top: 50px;
    // background-color: #fff;
    margin: 0 auto;
    z-index: 999;
}

.container {
    // margin: 30px auto;
    width: 1200px;
    position: relative;
    background-color: #f8f8fa;
    height: 80px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
    padding: 2px 5px;

}

.Selection {
    position: absolute;
    right: -360px;
}

.input-one {
    flex: 1;
    margin: 10px 0 5px 0;
}

.search {
    margin: 0 auto;
    width: 560px;

    // height: ;
    /deep/ .ivu-input.ivu-input-large {
        border: 2px solid $theme_color;
        font-size: 12px;
        height: 35px;

        &:focus {
            box-shadow: none;
        }
    }

    /deep/ .ivu-input-group-append {
        border: 1px solid $theme_color;
        border-left: none;
        height: 30px;
        background-color: $theme_color;
        color: #ffffff;

        button {
            font-size: 14px;
            font-weight: 600;
            line-height: 1;
        }
    }
}

.logo-img {
    // position: absolute;
    // left: -360px;
    // top: -9px;
    // width: 150px;
    cursor: pointer;
    height: 70px;
}

.store-search {
    width: 55.6px;
    padding: 0 9px;
    border-radius: 0;
    border-radius: 3px;

    &:nth-child(2) {
        width: 55px;
        margin-left: -2px;
        border-radius: 3px;
    }
}

.btn-div {
    position: relative;
    height: 0px;
    top: -38px;
    left: 352px;
}
</style>
